<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        p{
            margin: 0;
            font-size: 18px;
        }
        .model{
            position: fixed;
            top: 25vh;
            left: 40vw;
            width: 300px;
            height: 200px;
            box-sizing: border-box;
            padding: 15px;
            box-shadow: 0 0 2px 0;
            background-color: whitesmoke;
        }
        .model:hover{
            cursor: pointer;
        }
        .header{
            display: flex;
            justify-content: space-between;
        }
        .content{
            text-align: center;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <button class="del">删除</button>
    <button class="login">登录</button>
    <!-- <div class="model">
        <div class="header">
            <p>提示信息</p>
            <p class="close">x</p>
        </div>
        <div class="content">
            <p>内容</p>
        </div>
    </div> -->
    <script>
        // 构造函数，创建模态框
        function Model(title,desc){
            this.ModelBox=document.createElement('div')
            this.ModelBox.classList.add('model')
            this.ModelBox.innerHTML=`
            <div class="header">
                <p>${title}</p>
                <p class="close">x</p>
            </div>
            <div class="content">
                <p>${desc}</p>
            </div>`
        }
        // 打开模态框方法
        Model.prototype.open=function(){
            // 如果存在模态框则删除
            const model= document.querySelector('.model')
            if(model){
                model.remove()
            }
            // 显示模态框
            document.body.append(this.ModelBox)
            // 关闭按钮监听事件
            document.querySelector('.close').addEventListener('click',()=>this.close())
        }
        // 关闭方法
        Model.prototype.close=function(){
            this.ModelBox.remove()
        }
        
        
        document.querySelector('.del').addEventListener('click',function(){
            const a=new Model('提示信息','不可删除')
            a.open()
        })
        document.querySelector('.login').addEventListener('click',function(){
            const a=new Model('提示信息','请先注册')
            a.open()
        })
    </script>
</body>
</html>